<template>
  <div class="project-container">
    <h1>The Moon and Sixpence</h1>
    <p class="sub-title">理想主义的花最终会盛开在浪漫主义的土壤里</p>
    <div class="content">
      <div
          v-for="(item, index) in projectList"
          :key="index"
          class="project-item"
      >
        <img v-lazy="item.coverLink" alt=""/>
        <div class="mask">
          <h3>{{ item.name }}</h3>
          <button class="see-detail" @click="handlePreview(item.coverLink)">查看详情</button>
        </div>
      </div>
    </div>
    <button class="see-more" @click="router.push('/resource')">查看更多</button>
  </div>
  <ImagePreview :image-url="imgUrl" :show="showImage" @close="showImage = false"/>
</template>

<script lang="ts" setup>
import {onMounted, ref, Ref} from "vue";
import {useRouter} from "vue-router";
import {getWaterfallList} from "@/api/request";
import ImagePreview from "@/components/ImagePreview/index.vue";

type ResourceArrayRef = Ref<
    {
      name: string;
      resourceType: number;
      coverLink: string;
      resourceLink: string;
    }[]
>;
const router = useRouter();
const projectList: ResourceArrayRef = ref([]);
const showImage = ref(false)// 图片显示
const imgUrl = ref("") // 图片数据

// 图片预览
const handlePreview = function (url: string) {
  imgUrl.value = url
  showImage.value = true
}

onMounted(async () => {
  getWaterfallList({
    page: 4,
    size: 6,
    type: 1,
  }).then((res) => {
    if (res.data.length > 0) {
      projectList.value = res.data;
    }
  });
  const targetElement = document.querySelector(".project-container");
  if (targetElement) {
    intersectionObserver.observe(targetElement);
  }
});
const intersectionObserver = new IntersectionObserver((entries) => {
  // entries 是一个 IntersectionObserverEntry 对象的数组
  if (entries[0].intersectionRatio > 0) {
    // 在这里添加 .fade-in 类来触发动画效果
    entries[0].target.classList.add("fade-in");
    // 停止观察已经进入视口的元素，以避免重复触发动画
    intersectionObserver.unobserve(entries[0].target);
  }
});
</script>

<style lang="scss" scoped>
.project-container.fade-in {
  opacity: 1; /* 当添加 .fade-in 类时，透明度变为 1 */
  transform: translateX(0); /* 当添加 .fade-in 类时，偏移变为 0，即不偏移 */
}

.project-container {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 50px 0;
  opacity: 0;
  transform: translateX(
          -200px
  ); /* 当添加 .fade-in 类时，偏移变为 0，即不偏移 */
  transition: all 2s;

  .see-more {
    border-color: #f77ade;
    color: #fff;
    margin-bottom: 4px;
    font-size: 20px;
    font-weight: 600;
    padding: 23px 60px;
    border-radius: 50px;
    letter-spacing: 5px;
    font-family: "宋体", serif;
    transition: all 0.5s;
    background-size: 200% 100%;
    background-position: right bottom;
    background-image: linear-gradient(to right, #f77ade 50%, #555660 50%);

    &:hover {
      background-position: left bottom;
    }
  }

  h1 {
    font-size: 30px;
    font-family: "宋体", serif;
  }

  .sub-title {
    margin: 30px 0;
    font-size: 14px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
  }

  .content {
    height: 100%;
    width: 70%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 30px;

    .project-item {
      flex: 0 0 calc(33.333% - 30px); /* 设置每个子元素占据的宽度 */
      margin: 15px;
      height: 300px;
      cursor: pointer;
      transition: all 0.5s;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      border: 20px solid #ffffff;
      box-shadow: 0px 0px 45px rgba(0, 0, 0, 0.18);

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .mask {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-start;
        background: linear-gradient(
                to bottom left,
                rgba(91, 57, 201, 0.9) 0%,
                rgba(0, 0, 0, 0.5) 100%
        );
        transition: all 0.5s;
        opacity: 0;
        z-index: 2;

        .see-detail {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          color: #5e3dca;
          font-size: 14px;
          font-family: "宋体", serif;
          padding: 10px 20px;
          background: white;
          border-radius: 25px;
          transition: all 0.5s;

          &:hover {
            background: black;
            color: white;
          }
        }

        h3 {
          font-family: "宋体", serif;
          margin-left: 20px;
          margin-bottom: 20px;
        }
      }

      &:hover {
        transform: scale(1.05);
      }

      &:hover .mask {
        opacity: 1;
      }
    }
  }
}
</style>
